<template>
  <ele-modal
    :width="750"
    :footer="null"
    :visible="visible"
    :confirm-loading="loading"
    title="模板选择"
    :body-style="{ padding: 0, paddingBottom: '60px' }"
    @update:visible="updateVisible"
  >
    <div class="padding-y-15 text-center" style="background-color: #f5f5f5"
      >模板名称</div
    >
    <div>
      <div
        class="padding-y-15 solid-bottom text-center hands"
        :class="[current == index ? 'bg-f5f5f5' : '']"
        v-for="(item, index) in midOptions"
        :key="index"
        @click="toggle(item, index)"
        >{{ item.label }}</div
      >
    </div>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Form } from 'ant-design-vue';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import { get_goods_category_list } from '@/api/material/receipts_templete';

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean
  });

  const emit = defineEmits(['sel', 'update:visible']);

  // 提交状态
  const loading = ref(false);
  const current = ref(-1);
  const midOptions = ref([]);

  onMounted(() => {
    get_goods_category_list({ page: 1, page_size: 9999 }).then((res) => {
      res.forEach((item) => {
        midOptions.value.push({
          label: item.name,
          value: item.code
        });
      });
    });
  });
  const toggle = (item, index) => {
    current.value = index;
    emit('sel', item);
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style lang="less" scoped>
  .bg-f5f5f5 {
    background-color: #f5f5f5;
  }
</style>
